<template>
  <div>
    <div class="list">
      <Dog
        v-for="(obj, index) in arr"
        :key="index"
        :imgurl="obj.dogImgUrl"
        :dogname="obj.dogName"
        @love="fn"
      ></Dog>
    </div>
    <hr />
    <p>显示喜欢的狗:</p>
    <ul>
      <li v-for="(item, index) in loveArr" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import Dog from "@/components/practice-dogs.vue";
export default {
  data() {
    return {
      // 1. 准备数据
      arr: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://img1.baidu.com/it/u=475120622,6600349&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=528",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=3606307439,3326146874&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=757",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://img1.baidu.com/it/u=999074466,1525171260&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=1346410183,3844027745&fm=253&fmt=auto&app=138&f=JPEG?w=498&h=1024",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2372374543,612363602&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          dogName: "萨摩耶",
        },
      ],
      loveArr: [],
    };
  },
  components: {
    Dog,
  },
  methods: {
    fn(dogName) {
      this.loveArr.push(dogName);
    },
  },
};
</script>

<style scoped>
.list::after{
  display: block;
  content: '';
  clear: both;
}
</style>
